<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 店铺账号设置 -->
  <div class="Mall4j con-box page-uc-shopaccount">
    <div class="box-tit">
      {{ $t('ucPassword.storeAccountSettings') }}
    </div>
    <div :class="['box-content','account',langStore.locale === 'en'?'en':'']">
      <!-- 设置店铺账号 -->
      <div
        v-if="!isSetPassword"
        class="setup-accout"
      >
        <div :class="['item',errorTips === 1? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.loginAccount') }}：
          </div>
          <input
            v-model="dataForm.phoneNumber"
            type="text"
            class="text"
            :placeholder="$t('ucPassword.enterNumber')"
            @blur="checkSetInput(1)"
          >
          <div
            v-if="errorTips === 1"
            class="error-text"
          >
            {{ $t('ucPassword.enterNumberTips') }}
          </div>
        </div>
        <div :class="['item',errorTips === 2? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.verificationCode') }}：
          </div>
          <div class="validcode-box">
            <div class="code-int-box">
              <input
                v-model="dataForm.validCode"
                type="text"
                class="code-int"
                :placeholder="$t('ucPassword.pleaseEnter')"
                @blur="checkSetInput(2)"
              >
              <div
                v-if="show"
                class="send-code"
                @click="getValidCode"
              >
                {{ $t('ucPassword.getCode') }}
              </div>
              <div
                v-if="!show"
                class="send-code"
                style="cursor: not-allowed;"
              >
                {{ count }} s
              </div>
            </div>
          </div>
          <div
            v-if="errorTips === 2"
            class="error-text"
          >
            {{ $t('ucPassword.CaptchaEmpty') }}
          </div>
        </div>
        <div :class="['item',errorTips === 3? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.setPassword') }}：
          </div>
          <input
            v-model="dataForm.password"
            v-input-rule
            type="password"
            class="text"
            :placeholder="$t('ucPassword.setPasswordTips')"
            @blur="checkSetInput(3)"
          >
          <div
            v-if="errorTips === 3"
            class="error-text"
          >
            {{ $t('ucPassword.setPasswordTips') }}
          </div>
        </div>
        <div :class="['item',errorTips === 4 || errorTips === 5? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.confirmPassword') }}：
          </div>
          <input
            v-model="dataForm.confirmPassword"
            v-input-rule
            type="password"
            class="text"
            :placeholder="$t('ucPassword.enterLoginAgain')"
            @blur="checkSetInput(4)"
          >
          <div
            v-if="errorTips === 4"
            class="error-text"
          >
            {{ $t('ucPassword.enterLoginAgain') }}
          </div>
          <div
            v-if="errorTips === 5"
            class="error-text"
          >
            {{ $t('ucPassword.notEnteredPassword') }}
          </div>
        </div>
      </div>

      <!-- 修改店铺登录密码 -->
      <div
        v-if="isSetPassword"
        class="setup-accout"
      >
        <div :class="['item',errorTips === 6? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.originalPassword') }}：
          </div>
          <input
            v-model="dataForm.oldPassword"
            v-input-rule
            type="password"
            class="text"
            :placeholder="$t('ucPassword.enterOriginalPassword')"
            @blur="checkChangeInput(6)"
          >
          <div
            v-if="errorTips === 6"
            class="error-text"
          >
            {{ $t('ucPassword.originalNotEmpty') }}
          </div>
        </div>
        <div :class="['item',errorTips === 7? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.newPassword') }}：
          </div>
          <input
            v-model="dataForm.newPassword"
            v-input-rule
            type="password"
            class="text"
            :placeholder="$t('ucPassword.PleaseEnterNewPassword')"
            @blur="checkChangeInput(7)"
          >
          <div
            v-if="errorTips === 7"
            class="error-text"
          >
            {{ $t('ucPassword.setPasswordTips') }}
          </div>
        </div>
        <div :class="['item',errorTips === 8 || errorTips === 9 ? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{ $t('ucPassword.confirmPassword') }}：
          </div>
          <input
            v-model="dataForm.confirmNewPassword"
            v-input-rule
            type="password"
            class="text"
            :placeholder="$t('ucPassword.enterNewAgain')"
            @blur="checkChangeInput(8)"
          >
          <div
            v-if="errorTips === 8"
            class="error-text"
          >
            {{ $t('ucPassword.enterNewAgain') }}
          </div>
          <div
            v-if="errorTips === 9"
            class="error-text"
          >
            {{ $t('ucPassword.newNotMatch') }}
          </div>
        </div>
      </div>

      <div class="item">
        <div class="tit">
          &nbsp;
        </div>
        <a
          href="javascript:void(0)"
          class="btn"
          @click="preserveInfo()"
        >{{ $t('ucPassword.saveAccountInformation') }}</a>
      </div>
      <div class="tips">
        {{ $t('tips') }}：{{ $t('ucPassword.passwordTips') }} <a href="http://b2b2c-multishop.gz-yami.com">http://b2b2c-multishop.gz-yami.com</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as util from '@/utils/index.js'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const langStore = useLanguageStore()

const emit = defineEmits(['userCenterInfo'])

const dataForm = {
  phoneNumber: '', // 登录手机号
  validCode: '', // 验证码
  password: '', // 登录密码
  confirmPassword: '', // 确认密码
  oldPassword: '', // 原登录密码
  newPassword: '', // 新登录密码
  confirmNewPassword: '' // 确认新登录密码
}

// 是否已经设置过密码  true修改密码  false设置密码
const isSetPassword = ref(!((route.query.isSetPassword === 'false' || route.query.isSetPassword === false)))
onMounted(() => {
  // 设置网页标题
  document.title = $t('userCenter.changeStorePassword')
})

const errorTips = ref(0)
/**
 * 输入框失去焦点时
 */
const checkSetInput = (sts) => {
  // 设置
  if (sts === 1 && (!util.checkPhoneNumber(dataForm.phoneNumber))) {
    errorTips.value = 1
  } else if (sts === 2 && (dataForm.validCode.length === 0)) {
    errorTips.value = 2
  } else if (sts === 3 && (dataForm.password.trim().length < 6 || dataForm.password.trim().length > 12)) {
    errorTips.value = 3
  } else if (sts === 4 && (dataForm.confirmPassword.length === 0)) {
    errorTips.value = 4
  } else if (sts === 4 && (dataForm.confirmPassword !== dataForm.password)) {
    errorTips.value = 5
  } else {
    errorTips.value = 0
  }
}

const checkChangeInput = (sts) => {
  // 修改
  if (sts === 6 && (dataForm.oldPassword.length === 0)) {
    errorTips.value = 6
  } else if (sts === 7 && (dataForm.newPassword.length === 0)) {
    errorTips.value = 7
  } else if (sts === 8 && (dataForm.confirmNewPassword.length === 0)) {
    errorTips.value = 8
  } else if (sts === 8 && (dataForm.confirmNewPassword !== dataForm.newPassword)) {
    errorTips.value = 9
  } else {
    errorTips.value = 0
  }
}

let hadGotCode = false // 是否已经点击了获取验证码
// 验证码相关
const show = ref(true)
const count = ref('')
let timer = null
/**
 * 获取验证码
 */
const getValidCode = () => {
  if (!util.checkPhoneNumber(dataForm.phoneNumber)) {
    errorTips.value = 1
    return
  }
  if (hadGotCode) {
    return
  }
  errorTips.value = 0
  const sendSmsParam = {
    mobile: dataForm.phoneNumber,
    shopAccount: 1
  }
  http.post('/p/shop/sendCode', sendSmsParam).then(() => {
    hadGotCode = true
    const timeCount = 60
    if (!timer) {
      count.value = timeCount
      show.value = false
      timer = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--
        } else {
          show.value = true
          clearInterval(timer)
          timer = null
          hadGotCode = false
        }
      }, 1000)
    }
  })
}

/**
 * 保存账号信息
 */
const preserveInfo = () => {
  if (!isSetPassword.value) { // 设置
    accountSettingsSubmit()
  } else {
    updateShopPassword()
  }
}

/**
 * 设置店铺账号
 */
const accountSettingsSubmit = () => {
  if (!util.checkPhoneNumber(dataForm.phoneNumber)) {
    errorTips.value = 1
  } else if (dataForm.validCode.length === 0) {
    errorTips.value = 2
  } else if (dataForm.password.trim().length < 6 || dataForm.password.trim().length > 12) {
    errorTips.value = 3
  } else if (dataForm.confirmPassword.length === 0) {
    errorTips.value = 4
  } else if (dataForm.confirmPassword !== dataForm.password) {
    errorTips.value = 5
  } else {
    errorTips.value = 0
    const sendSmsParam = {
      username: dataForm.phoneNumber.trim(),
      password: dataForm.password.trim(),
      code: dataForm.validCode.trim()
    }
    http.post('/p/shop/saveUsernameAndPassword', sendSmsParam).then(() => {
      ElMessage({
        message: $t('ucPassword.AccountSuccessfully'),
        type: 'success'
      })
      router.push({ path: '/user-center' })
      emit('userCenterInfo')
    })
  }
}

/**
 * 修改密码
 */
const updateShopPassword = () => {
  if (dataForm.oldPassword.length === 0) {
    errorTips.value = 6
  } else if (dataForm.newPassword.length === 0) {
    errorTips.value = 7
  } else if (dataForm.confirmNewPassword.length === 0) {
    errorTips.value = 8
  } else if (dataForm.confirmNewPassword !== dataForm.newPassword) {
    errorTips.value = 9
  } else {
    const sendSmsParam = {
      password: dataForm.oldPassword,
      newPassword: dataForm.newPassword
    }
    http.post('/p/shop/updatePassword', sendSmsParam).then(() => {
      ElMessage({
        message: $t('ucPassword.PasswordSuccessfully'),
        type: 'success'
      })
      router.push({ path: '/user-center' })
      emit('userCenterInfo')
    })
  }
}

</script>

<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>

<style lang="scss" scoped>
@use "../common/scss/uc-edit";
</style>
